<%--
  Created by IntelliJ IDEA.
  User: 10549
  Date: 2020/6/10
  Time: 12:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="commons/header.jsp"%>
<div style="background-color: #ffffff; border-radius: 3px; padding: 12px;margin-top: 20px">
<h2>商品种类添加</h2>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-xs-push-3">
            <form>
                <div class="form-group">
                    <label for="itemName">商品Id</label>
                    <input id="itemName" class="form-control">
                </div>
                <div class="form-group">
                    <label for="goodName">商品种类名</label>
                    <input type="text" class="form-control" id="goodName">
                </div>
                <div class="form-group">
                    <label for="enName">商品英文别名</label>
                    <input type="text" class="form-control" id="enName">
                </div>
                <div class="form-group">
                    <input type="button" class="btn btn-success btn-block" onclick="addItem()" value="添加">
                </div>
            </form>
        </div>
    </div>
</div>


    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <table id="itemDataTable" class="table table-hover table-bordered  table-sm">
                </table>

            </div>
        </div>

    </div>



</div>
<%@include file="commons/footer.jsp"%>
<script>
    //添加商品种类
    function addItem() {
        var Id = $('#itemName').val();
        var goodName = $('#goodName').val();
        var enName = $('#enName').val();

        console.log("goodName:" + goodName);

        if (Id==null||Id==""||goodName==null||goodName==""||enName==null||enName==""){
            Lobibox.notify('error',{
                delay:1500,
                size:'mini',
                msg:'请填完整信息，再提交',
            })
        }

        var params = {
            Id: Id,
            goodName: goodName,
            enName: enName,
        }
        $.ajax({
            url: "${pageContext.servletContext.contextPath}/goods/item/"+Id+"/"+goodName+"/"+enName,
            method:'Put',
            data:params,
            sync:false,
            success:function (_data) {

                // if (_data.code==1){
                //    Lobibox.notify('success',{
                //        delay:2000,
                //        size:'mini',
                //        msg:'添加成功',
                //    })
                // }

                alert("添加成功")
                resetModal();
                // window.location.href = "commodity.jsp";
                $('#itemDataTable').bootstrapTable('refresh');
                // let parse = JSON.parse(_data);
                if (_data.code==-1||_data.code==null){
                    Lobibox.notify('error',{
                        delay:1500,
                        size:'mini',
                        msg:'添加失败',
                    })
                }
            }
        })
    }
    //清空表单
    function resetModal() {
        $('#itemName').val('');
        $('#goodName').val('');
        $('#enName').val('');//清空下拉列表
    }

    //item表格展示
    $('#itemDataTable').bootstrapTable({
        url:'${pageContext.servletContext.contextPath}/goods/getItem',
        method:'get',
        columns:[
            {title:'id',field:'id',align: 'center'},
            {title:'种类名',field:'name',align: 'center'},
            {title:'别名',field:'alias',align: 'center'},
        ],
        pagination: true,  //表示使用分页
        /*
          1. [{id: 1, name: 'xxx'}, {}, {}, {}]  如果是客户端分页，一次性拿到所有的数据，在用户每次点击翻页的时候
             直接从客户端去找，减少了与服务端的交互， 100条以内的数据这么来干。
 *        2. {rows: [{}, {}], total: 23}, 当服务端分页的时候，那么就每次翻页就直接到服务器端查询，
         */
        sidePagination: 'server' //枚举值：client  server, 默认值是client
    })










</script>
